import {
  Card,
  Space,
  Button,
  Tooltip,
  RadioGroup,
  Radio,
} from '@douyinfe/semi-ui';
import { IconArrowUpLeft } from '@douyinfe/semi-icons';
import DepartmentDetail from './detail';
import { useNavigate, useParams } from 'react-router-dom';
import { useSelector, shallowEqual } from 'react-redux';
import { IRootReducerState } from '@/store/root-reducer';
import { usePageContext } from '../context';
import { useEffect, useMemo, useState } from 'react';
import { useDispatch } from 'react-redux';
import DepartmentStepNav from '../step-nav';
import DepartmentEdit from './edit';
import { FormApi } from '@douyinfe/semi-ui/lib/es/form';
import { initialEntity } from '../helper';

const DepartmentEntityCard = ({ editable = false }) => {
  const navigate = useNavigate();

  const PageContext = usePageContext();
  const PageAction = useMemo(() => {
    return {};
  }, [PageContext]);

  const dispatch = useDispatch<any>();
  const {
    department: { entity, entities },
  } = useSelector<IRootReducerState, any>(
    (state) => ({ department: state.department }),
    shallowEqual
  );

  const [formApi, setFormApi] = useState<FormApi<any>>();

  useEffect(() => {
    formApi?.setValues(entity);
  }, [entity]);

  // const entity = useMemo(() => {
  //   return id ? entities.find((e: any) => String(e[key]) == id) : initialEntity;
  // }, [id, entities]);

  return (
    <Card
      bordered={false}
      title={
        <div className='flex justify-start relative'>
          <Space>
            <Tooltip content='返回'>
              <span style={{ display: 'inline-block' }}>
                <Button
                  icon={<IconArrowUpLeft />}
                  type='tertiary'
                  onClick={() => navigate(-1)}
                />
              </span>
            </Tooltip>
            <DepartmentStepNav />
          </Space>
        </div>
      }
      headerExtraContent={null}
      footer={
        <div className='flex justify-center gap-x-2'>
          {editable && (
            <>
              <Button
                theme='solid'
                size='large'
                className='w-1/6'
                onClick={() => {
                  console.log(formApi?.getValues());
                }}>
                保存
              </Button>
              <Button
                size='large'
                className='w-1/6'
                onClick={() => {
                  formApi?.reset();
                }}>
                重置
              </Button>
            </>
          )}
        </div>
      }>
      {editable ? (
        <DepartmentEdit entity={entity} formApiRef={setFormApi} />
      ) : (
        <DepartmentDetail entity={entity} />
      )}
    </Card>
  );
};

export default DepartmentEntityCard;
